<template>
  <div>
    <div v-for="item of list" :key="item.id" style="margin: 8px">
      <div v-if="isImgUrl(item.uploadFileName)">
        <img
          :src="getFileUrl(item)"
          :alt="item.uploadFileName"
          style="max-width: 100%"
          @click="onImgClick(getFileUrl(item))"
        />
      </div>
      <div v-else-if="isVideoUrl(item.uploadFileName)">
        <video controls :src="getFileUrl(item)" style="max-width: 100%">
          <p>对不起，视频不支持播放。</p>
        </video>
      </div>
      <div v-else-if="isAudioUrl(item.uploadFileName)">
        <audio controls :src="getFileUrl(item)" style="max-width: 100%">
          <p>对不起，音频不支持播放。</p>
        </audio>
      </div>
      <div v-else style="font-size: 14px">
        <a :href="getFileUrl(item)">{{ item.uploadFileName }}</a>
      </div>
    </div>
    <ImagePreview
      ref="ImagePreview"
      v-model="showImgPreview"
      :images="preImages"
    />
  </div>
</template>

<script>
import ImagePreview from '@/widgets/ImagePreview'
import { rqtPostAttachmentList, getFileUrl } from '@/services/common/attachment'
import { isImgUrl, isVideoUrl, isAudioUrl } from '@/utils/public/file'

export default {
  name: 'AttachmentCpt',
  components: {
    ImagePreview
  },
  data() {
    return {
      itemInfo: {},
      list: [],
      showImgPreview: false,
      preImages: []
    }
  },
  mounted() {},
  methods: {
    showView(attachment) {
      this.itemInfo = { ...attachment }
      if (!this.itemInfo.businessId || !this.itemInfo.attachmentType) {
        throw 'attachment cpt has parameter error!'
      }
      let params = {
        businessId: this.itemInfo.businessId,
        attachmentType: this.itemInfo.attachmentType
      }
      rqtPostAttachmentList(params)
        .then(res => {
          const resData = res.data.data
          this.list = resData
        })
        .catch(() => {})
    },
    onImgClick(url) {
      this.preImages = [url]
      this.showImgPreview = true
    },
    isImgUrl,
    isVideoUrl,
    isAudioUrl,
    getFileUrl
  }
}
</script>
